// useKnob.ts
import addons from '@storybook/addons';
import { useEffect, useState } from 'react';
export default (name, knob, ...params) => {
  const initialValue = knob(name, ...params);
  const [value, setValue] = useState(initialValue);
  useEffect(() => {
    const onChange = (change: any) => {
      if (!change.manual) {
        if (change.name === name) {
          setValue(change.value);
        }
      }
    };
    addons.getChannel().addListener('storybookjs/knobs/change', onChange);
    return () => {
      addons.getChannel().removeListener('storybookjs/knobs/change', onChange);
    };
  }, []);
  return value;
};

const svelteKnobs = (story: Function) => {
    let Component = (function () {
        const C = story().Component
        const c = new C(...arguments)
        const change = (change: any) => {
            if (!change.manual) {
                const prop: any = {}
                prop[change.name] = change.value
                c.$set(prop)
            }
        }
        /* unhook event on destruction */
        c.$$.on_destroy.push(function () {
            addons.getChannel().removeListener('storybookjs/knobs/change', change)
        })
        /* hook event ~anyway~ as onMount already happened */
        addons.getChannel().addListener('storybookjs/knobs/change', change)
        return c
    })
    return ({
        ...story(),
        Component
    })
}

export default {
    title: 'RenderGizmo',
    /* add the sveltKnobs decorator that knows to update individual props */
    decorators: [svelteKnobs, withKnobs({ disableForceUpdate: true })]
}

export const Basic = () => ({
    Component: RenderGizmo,
    props: {
        cvsrc,
        /* use knobs like you normally do */
        pdfPage: number('pdfPage', 1)
    }
})